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Vítejte ve světě animací! 


PAVEL STŘÍŽ (CZ) 


Abstrakt. Článek představuje základní možnosti animování grafiky ve světě TgXu. 


Klíčová slova. dvisvgm, svganimation, media4svg. 
WELCOME TO THE WORLD OF ANIMATIONS! 


Abstract. The article introduces basic options of animating graphics in the TEX world. 


Keywords. dvisvgm, svganimation, media4svg. 


1. Vstup do světa xml 


v 


Formát xml jako rozšíření html asi netřeba blíž představovat. Vyřešil starší pro- 
blém strukturování dat nad rámec dat v tabulce řádky krát sloupce na straně 
jedné a relačních databází na straně druhé. S xml se potkáváme u MathML 
a především CONIpXT tomu věnoval velkou pozornost. 


Zájemce o tuto problematiku odkazuji na knihu Dana Lynche z roku 2020 The 
Art of Digital Publishing, kapitolu 6: The 
Mathematical Web. 

U grafiky přichází formát svg, textový formát pracující v mezích xml. Pře- 
devším program zaznamenal velkou oblibu ve světě open source, svg 
používá jako nativní formát s možností importu a exportu do pdf, včetně mož- 
nosti přes příkazový řádek a parametr --export-pdf. Ve světě TpXu byla grafika 
vždy trochu pozadu a plní trochu jiné úkoly než na které jsou grafici a animátoři 
zvyklí. TikZ umí načíst svg. Jisté usnadnění dávají balíčky svg, svg-extract, starší 
balíček a v době psaní tohoto článku ještě nebyl zařazen 
do IgXLive. 


$ texdoc svg svg-extract svg-inkscape 


$ firefox https://ctan.org/pkg/tikztosvg 


Nyní se nám podaří otevřít pdf přes Inkscape, nabídne nám možnosti přes 
knihovnu Poppler/Cairo či přes upravenou variantu knihovny Poppler. Pokud 
navolíme Internal import a odškrtneme Replace PDF fonts by closest-named 
installed fonts, dá se s obrázkem pracovat, byť texty se nedají editovat, jsou 
z nich křivky. 
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Jaromír Antoch tuto cestu podrobněji zkoušel a u některých starších příspěvků 
se text jakoby rozsype. Dávám to za vinu starším písmům ještě v rastrovém 
formátu. Asi by si to zasloužilo ještě bádání. 

TikZ umí vygenerovat svg, viz kapitola 10.2.4 v manuálu verze 3.1.5b, závisí 


však na nástroji 


$ texdoc tikz 


2. dvisvgm v2.9.1 


Na následující testy jsem si připravil zatěžkávací dokument, pracovně soubor 
100-pisma.tex. Znaky s diakritikou, rastrové emodži a kousek japonské básně 
jako zástupce jazyků CJKV. 


documentclassfarticle) 

Vusepackagefemoji) 

Vusepackagefluatexja) 

beginfdocument)pagestylefempty+ 

Vhugenoindent 

Ů, náhlý déšť již zvířil prach a čilá laň teď běží s houfcem gazel 

k úkrytům.Nemojifbaby)Nemojifsparkling-heart)Nemojifspeak-no-evil-monkey) 
m < 51 PŘÍLU BIWAWÉA RZ LBŘAT HDI Mašín 8 8OA 

Nendfdocument) 


Jeden ze starších pokusů jak získat svg je nástroj pdf2svg. To bude pro mne 


srovnávací dokument. 


$ sudo apt install pdf2svg 
Spouštíme a dostáváme první obrázek ze čtyř dále v textu. 


$ lualatex 100-pisma.tex 
$ pdf2svg 100-pisma.pdf 100-pisma-pdf2svg.svg 


Nástroj dvisvgm má domovskou stránku https://dvisvgm.de 


$ man dvisvgm 
$ info dvisvgm 


U písem si musíme dát pozor a případně zvolit přepínač -n (bez zařazení 
písem). Zde je ukázka rozdílu při aplikaci na ukázkový dokument z http:// 
ctan.math.illinois.edu/macros/latex/contrib/media4svg/example/. 


$ dvilualatex beamer-example.tex 

$ dvilualatex beamer-example.tex 

$ dvisvgm --bbox=papersize --font-format=woff2 --zoom=-1 --page=- 
beamer-example.dvi 

+$ dvisvgm -n --bbox=papersize --font-format=woff2 --zoom=-1 --page=- 
beamer-example.dvi 
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Rozdíl mezi 3. a případným 4. příkazem je viditelný. Došlo k náhradě písem 
a umístění glyfů nesedí. I kdyby vše sedělo, zdrojový kód svg je prakticky ručně 
needitovatelný. 


Player cortrol Player control 


The standardplayer cortrols (option“controls *) take a lot of spaceof the media The standard player controls (option “controls") take a lot of space of the media 
displaj. Thereforejt is not recommendetb enablethem. Nevertheless, isplay. Therefore, it is not recommended to enable them. Nevertheless, 
interactiviy is still prwidedthroughtoudh or left mousebuttonclick, andthrough interactivity is still provided through touch or left mouse button click, and through 
the keyboardas summarizedn the table. the keyboard as summarized in the table. 

Click on the mediadisplay to start playbak. To pauseplayback, pressthe left Click on the media display to start playback. To pause playback, press the left 


mousebutton on the mediadispla. Releaseit to resumeplayback. To pause mouse button on the media display. Release it to resume playbaci 
playback permanety, pressthe left mousebutton on the mediadisplag andmoe playback permanently, press the left mouse button on the media display and move 
the mouseout whilekeepingthe button pressed. the mouse out while keeping the button pressed. 


Command Shortcut Command Shortcut Command Shorteut Command Shorteut 
TogglePlay/P ause Space Seekbak 1% (+] Toggle Play/Pause Seek back 1% 
Increaseolume ji Seekforvwrd1% |-| Incre olume Seek forward 1% 
Decreaseolume Seekbadk 10% cm+(< Decrease volume Seek back 10% (Cn]+(e] 
Unmute audio + [ Seekforvard10% (Ctr]+[—> Unmute audio T) Seek forward 10% [Ctl]+| >] 
Mute audio +[£] Seekto beginning (Hom4 Mute audio ] Seek to beginning — (Home 
ToggleFull-Screen Seekto end (End Toggle Full-Screen [FIL] Seek to end (End, 


Kdyby nástroj nemohl dohledat písma GhostScriptu, užívá se k tomu parametr 
--libgs. Pokud užijeme náhradu písma, je dobré zvolit parametr -e na přesný 
výpočet bounding boxu glyfů. Je to podobné jako u nástroje pdfcrop. Můžeme 
zvolit cestu tex>dvi/xdvsvg, ale i tex—>pdf/pssvg. 

Dokumentace doporučuje užít další parametry: --font-format=woff nebo 
woff2 na nastavení formátu písma, --zoom=-1 aby se nezasahovalo do veli- 
kosti stran, --page=1,- pro volbu všech stran, jinak se bere jen první strana, 
--optimize pro optimalizaci výsledného svg, případně i -z / --precision=1 
na nastavení počtu desetinných míst. Na zobrazení svg doporučují prohlížeče 
Chrome, Chromium a Opera, Firefox se zdá být pomalejší. 

U našeho zatěžkávacího dokumentu spouštíme: 


$ dvilualatex 100-pisma.tex 

$ dvisvgm -n --z00m=-1 --page=- -o 100-pisma-prespdfi.svg --pdf 100-pisma.pdf 

$ dvisvgm --font-format=woff2 --exact --zoom=-1 --page=- -o 100-pisma-spismy.svg 
100-pisma.dvi 

$ dvisvgm -n --z00m=-1 --page=- -o 100-pisma-prespdf2.svg --pdf 
--transform="R20,w/3,2h/5 Ticm,1cm S2,3" 100-pisma.pdf 


Níž jsou náhledy. První řádek nám vysází dokument do dvi (1. obrázek i iden- 
tický výsledek nástrojem pdf2svg), druhý převodem písem do vektorových kři- 
vek, třetí se pokusí o vysázení s náhradou písem a poslední příkaz je ukázka 
geometrické transformace celé stránky. Je vidět, že nástroj má nějakou závadu 
u pozadí rastrových emodži, jinak je výsledek uspokojivý při převodu písem do 
křivek. 
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O, náhlý déšť již zvířil prach a čilá laň teď |O, náhlý déšť již zvířil prach a čilá laň teď 


běží s houfcem gazel k úkrytům. © ©% ©9 | běží s houfcem gazel k úkrytům [EišF] 


Bc id Bříše RIHVMZ KB HT 8ňÍE RIMOJÉZ 
Z EARKZT MODE WÁRRRLDA| R ZEAEZT MOJE WÝNRENDA 
BOM BOH 
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náhlý déšť již zvířil prac h a čilá laň 


ěží | s houfcem gazel k úkrytům. ea 


Bm<B4 SŘšíť RAHWÉS R 
z ZBXAT MHDWC WMinšýhba 
80m 


3. animate + dvisvgm 


Ve světě JavaScriptu se dějí neskutečné věci. 


Za zmínku stojí https ://www.w3.org/TR/SVG11/aninate.html) Prezi| svgjs 
https: //css-tricks.com/animate-calligraphy-with-svg/| https:// 
zmínku stojí i animejs a 


Za běžných okolností si lze pdf převést na rastrové obrázky a lze s nimi na 
webu dělat cokoliv. Ale jak přijde na užití hypertextových odkazů, vložení videí 
a animací, je lepší jít jinou cestou. 

Rudolf Blaško se mne ptal, jestli by dokázal svou 2D animaci z Asymptote 
dostat do animovaného svg. Není tedy na škodu podívat se na možnost vygene- 
rovat animaci z IgXu. Představím vám jednu z možných cest spolupráce TpXu 
a JavaScriptu. 

Vezmeme druhý obrázek z článku Rudolfa Blaška, animace ve 2D připravená 
v Asymptote. Pracovně soubor animacka. tex, jakože součást knihy. 


documentclassfstandalone) 
Vusepackage [inline]fasymptote+ 
beginfdocument) 
Vbeginfasy) 
real cc=1.5,u=5,v=3,rv=u/v,rm=1,rt=2*u,rp=rv-rm;int n=90; 
import graph; usepackage("animate");settings.tex="lualatex"; 
defaultpen(.25) ;import animation; size(0cm,6.cm); 
pair wheelpoint(real t) (return (rp*cos(t*rm/rv)+cc*cos(rp*t/rv), 
rp*sin(t*rm/rv)-cc*sin(rp*t/rv));+ 
guide wheel(guide g=nullpath,real a,real b,int n) freal width=(b-a)/n; for(int 
i=0;i<=n;++i)freal t=a+width*i;g=g--wheelpoint(t);) return g;+ 
real tinterval=O*rt*pi,t1=0,t2=t1+tinterval; draw(circle( (0,0) ,rv) ,olive+.75); 
real t1=8.8*pi/3; animation a; pair zi=wheelpoint(t1);dot(z1,red);real 
dt=(t2-t1)/n; 
for(int i=0;i<=n;++i) fsave(); 
real t=t1+dt*i,kx=rp*cos(rm*t/rv) ,ky=rp*sin(rm*t/rv); 
filldraw(circle((kx,ky),cc),.2paleblue+white,.2paleblue+white+.5); 
draw((0,0)--(rv*cos(rm*t/rv) ,rv*sin(rm*t/rv)),lightblue); 
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if (t>0) (filldraw((kx,ky)--arc((kx,ky) ,rm,180*rm*t/rv/pi, 
-180*rp*t/rv/pi)--cycle, white+.7bblue+opacity(.25) ,drawpen=lightblue);) 
draw(circle((0,0),rv),olive+.75);label("$K$",(-.6*rv,-.75b*rv),SW,olive); 
draw(circle((0,0),rp) ,dotted+blue+white); 
draw(circle((0,0),rp-cc) „yellow+.3bred); 
draw(circle( (0,0) ,rp+cc) ,yellow+.35bred); 
label ("$x$",(rv+.25,0),N);draw((-rv-.25,0)--(rv+.25,0)); 
label("$y$",(0,rv+.25),W);draw((0,-rv-.25)--(0,rv+.25)); 
draw(wheel(0,10*pi,8*n) ,dotted+red) ;draw(circle((kx,ky) ,rm) ,blue+.75); 
label ("$k$",(kx-.6,ky-.75) ,SW,blue) ;draw((kx,ky)--wheelpoint(t) „black+.625); 
dot((kx,ky));dot(wheelpoint(t),red+black); draw(wheel(t1,t,8*max(1,i)),red+.5); 
dot (wheelpoint(0) ,red+black) ;draw(wheel(0,t1,8*n) ,red+.5); 
label ("Xscriptsize$t="+string(t,7)+"$",(.3*rv,-rv),SE,blue); 
a.add();restore();) 
erase(); label(a.pdf(delay=250, "buttonsize=10pt, controls, loop, palindrome", 
multipage=false)); 
Nendfasy 
Nendfdocument+ 


Získáme soubor animacka-1.asy, když si zavoláme: 
$ lualatex animacka.tex 

Tento soubor podsuneme Asymptote: 
$ asy -vv animacka-1.asy 


Získáme především soubor animacka-1.pdf. 

Připravíme si pomocný soubor jadro.tex. Ten nám pomůže s výrobou vrstve- 
ného dvi se značkami pro dvisvgm. 
documentclass [dvisvgm] (standalone) 

Vusepackage [palindrome, controls=all1]fanimate) 
Vusepackagefgraphicx) 

beginfdocument) 

Nanimategraphicsí8J1 animacka-1)1)1) 
endfdocument) 

Spustíme: 
$ dvilualatex jadro.tex * nebo: lualatex --output-format=dvi jadro.tex 
$ dvilualatex jadro.tex 

Vzniká nám soubor jadro.dvi. Ten už převedeme do svg. 
$ dvisvgm --exact --z00m=-1 --page=- jadro.dvi 

Výsledné svg již můžeme otevřít, např. přes 


firefox jadro.svg 
google-chrome jadro.svg 
chromium jadro.svg 


© © 6 © 


opera jadro.svg 
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Pokud bychom si naopak přáli zařadit jadro.svg na webovou stránku, mustr 
by vypadal jako v tomto pracovním souboru webovka.html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta http-eguiv="Content-Type" content="text/html;charset=utf-8"> 
</head> 
<body> 
<object width="400px" type="image/svg+xml" data="jadro.svg"></object> 
</body> 
</html> 


4. svganimation 


Je tu ještě jiná možnost. A to získat sérii nezávislých svg, jeden svg soubor 
vzniklý z jednoho snímku či jedné strany pdf dokumentu. To bychom u naší 
ukázky předchozí kapitoly získali z mnohastránkového pdf takto: 


$ dvisvgm --pdf --exact --zo00m=-1 -o "%f-/40p" --page=- © animacka-1.pdf 


Parametr -o nám zajistí název souboru bez dodatečných nul. Nástrojů bychom 
našli nespočet, mě zaujal projekt na Syracuse: 


https://melusine.eu.org/syracuse/G/svganimation 


Zde je několik ukázek: 


https://melusine.eu.org/syracuse/G/svganimation-exemples 


První úkol je nástroj stáhnout. Lze to přes tlačítko tree snapshot z 


https://melusine.eu.org/syracuse/G/git/?p=svganimation.git;a=tree 
Pro automatizéry z příkazového řádku: 


$ curl -o svganimation.tgz "https://melusine.eu.org/syracuse/G/git/N 
Tp=svganimation.git;a=snapshot; h=HEAD;sf=tgz" 
+ nebo místo curl -o užít wget -0 

$ tar xvf svganimation.tgz 

$ cd svganimation-HEAD-9fed6b5/ * v mém konkrétním případě 


Nahlédl jsem na ukázky, vytvořil potřebné složky a nakopíroval 91 souborů 
„animacka-1-*.svg. 


$ cd ellipsographe/ 

$ mkdir animacka-1 

$ cp animation.html animacka-1.html 

$ cp <zdroj>/ animacka*.svg animacka-1/ 


V souboru animacka-1.html jsem upravil co bylo potřeba: popisky, otevření 
prvního souboru, rozsah animace, rychlost ap. Upravit popisky se dá v souboru 
../SVGPlayer0One.js. Zde je ukázka. Kvůli rozsahu zdrojový kód nepřikládám. 
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Asi by stačila knihovna jinja2 v Pythonu a obecná šablona by za chvíli byla 
hotová. 


» E p poslední -+ 


Koho by tato oblast zajímala víc, nechť jsou takové osobě inspirací nápady na 
https://tex.stackexchange.com/guestions/473936 


5. Hello, world! od balíčku media4svg v0.4 


Jeden z posledních experimentů v IpXovém světě je balíček který 
umožňuje při exportu do svg uložit audio a videostopy. Dokumentace je ještě 


v textové formě, nikoliv v pdf. Jedná se o jistý pokus generování snímků jako 


u pdf přes beamer| nebo nástroj typu 


$ youtube-dl -o linus.mp4 https://www.youtube.com/watch?v=CYvJPra7Ebk 
$ ffmpeg -i linus.mp4 -vn linus.mp3 


Připravíme si soubor export-media.tex: 


documentclass [dvisvgm,hypertex,aspectratio=169]fbeamer+ 
Nusefontthemefserif) 
Vusepackage [utf8](luainputenc)+ Nusepackage [T1] (fontenc+ 
Vusepackage [embed=false](media4svg) Nusepackagefmenukeys,siunitx,calc) 
Vusepackage [totpages]1zref) Nusepackagefatbegshi+ 
Nusepackageftikz+ Vusepgflibraryfarrows.meta) 
setbeamertemplatefnavigation symbols)1)+ 
def navBtnSize(9pt) VdefinavBtnLnWdf1.6pt+ 
WAtBeginShipout(/ 

WAtBeginShipoutAddToBox14 

specialfdvisvgm:raw 
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<defs><script type="text/javascript">), 
<! [CDATA[Y, document .addEventListener('keydown' ,function(e)f/, 
if (e.key=='PageDown' )(VifnumVthepage<Xztotpages 
document .location.replace('Xjobname-XtheXnumexprVthepage+1Xrelax.svg');% 
fi% 
Jelse if(e.key=='PageUp')(Nifnumthepage>1 
document .location.replace('Njobname-NtheXnumexprVthepage-1Xrelax.svg');% 
fi% 
JID34 
JI>4 
</script></defs>) 
MIA 
WAtBeginShipoutUpperLeftForegroundí/ 
raisebox(-dimexpr height+0.5exirelax) [Opt] [Opt] (Nmakebox [Npaperwidth] [r]f/ 
Ncolorfstructure!40!)% 
VifnumVthepage>1), 
hreffXjobname-Vtheknumexpr Vthepage-1relax.svg)1ý 
VtikzfWfilldraw[black!0!] (-1pt,-dimexprinavBtnSize/2+1ptrelax) 
rectangle 
(NdimexprNnavBtnSize+1ptNrelax,dimexpr V navBtnSize/2+1ptrelax); 
Ndraw[fStraight Barb[round])-,line width=XnavBtnLnWd] 
(-=1pt,0)-- (AnavBtnSize,0);))Y 
Nelse/ 
Wtextcolorflightgray)(Vtikz(Mfilldraw[black!0!] 
(=1pt,-dimexprnavBtnSize/2+1ptrelax) 
rectangle 
(NdimexprNnavBtnSize+1ptNrelax,dimexpr V navBtnSize/2+1ptrelax); 
draw [fStraight Barb[round])-,line width=NnavBtnLnWd] 
(-=1pt,0)-- (AnavBtnSize,0);))Y 
fi hspacef0.bex)4 
VifnumVthepage<ztotpagesý, 
hreffjobname-Vtheknumexpr Vthepage+1relax.svg)fý 
VtikzfWfilldraw[black!0!] (-1pt,-dimexprinavBtnSize/2+1ptNrelax) 
rectangle 
(NdimexprNnavBtnSize+1ptNrelax,dimexpr V navBtnSize/2+1ptrelax); 
draw[-4Straight Barb[round]),line width=XnavBtnLnWd] 
(-1pt,0)-- (AnavBtnSize,0);))Y 
Nelse“ 
Wtextcolorflightgray)(Ntikzí 
WMfilldraw[black!0!] (-1pt,-(dimexprnavBtnSize/2+1ptWrelax) 
rectangle 
(NdimexprNnavBtnSize+1ptNrelax,dimexpr V navBtnSize/2+1ptrelax); 
draw[-4Straight Barb[round]),line width=AnavBtnLnWd] 
(-1pt,0)-- (AnavBtnSize,0);))Y 
fi hspacef(0.bex)4 
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HIIŮ 

beginfdocument+ 

Vbeginfframe)fAudio+ 

Ahoj, světe, zde je audioLinus!par 

Vincludemedia [controls,width=4cm,keepaspectratio]faudio)flinus.mp3) 
Nendíframe+ 

Vbeginfframe)fAudiovideo) 

Ahoj, světe, zde je audiovideoLinus!par 

Vincludemedia [controls,width=4cm,keepaspectratio]fvideo)(linus.mp4) 
Nendfframe+ 

Nendfdocument) 


Spustíme: 


$ dvilualatex export-media.tex 

$ dvilualatex export-media.tex 

$ dvisvgm -n --bbox=papersize --font-format=woff2 --zoom=-1 --page=- 
export-media.dvi 


Získáme dvě svg s možností si pustit zvukovou stopu a video. Zde je výřez. 


Ahoj, světe, zde je audioLinus!| | Ahoj, světe, zde je audiovideoLinus! 


Pokud třetí řádek nahradíme za následující, získáme výsledek i s geometrickou 
transformací. 


$ dvisvgm -n --transform="R20,w/3,2h/5 Ticm,1cm S2,3" --page=- export-media.dvi 


6. Náhled na interaktivitu závěrem: BTpX2JS 


Když opomineme (GeoGebru|a další vhodné nástroje, zde je zajímavý experiment, 
na který bych rád poukázal. O projektu IAIEX2HTML5 od Dana Lynche jsem 
poprvé četl přes na stránkách |https://mathapedia.com/books/31/ 
sections/169/400. Ten se postupně rozšířil do obecnějšího projektu 


Autor je aktivní a některé chyby, na které jsem upozornil, upravil do něko- 
lika dnů. Nyní projekt rozšiřuje vedle výstupu do HTML5 (latex2htm15) jako 
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aplikaci pro React (latex2react) a Nuxt (latex2vue). To je nad rámec tohoto 
článku, ale je zajímavé sledovat, kam se vývoj směřuje. 

Ono asi mělo dojít na nápad Petra Olšáka zmíněný na jedné konferenci TpX per- 
ience, že by měl TEX převést do C++ knihoven. Škoda, že se takový nápad a po- 
dobné pokusy neuchytily, pomohlo by pro- 
gramátorským polyglotům v přechodech mezi TpXem a dalšími jazyky. Naopak 
jít do hlouby se ukazuje jako cesta budoucnosti, viz LuaTEX.| 

Uzavřu své pokusy náhledy z tohoto projektu. Ukázky lze interaktivně nastavit 
či sledují pohyb ukazatele myši ve webovém prohlížeči. 
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